<template>
  <div class="main">
    <title1 tit="注册"></title1>
    <div class="zhuce">
      <div class="enroll">
        <van-cell-group inset>
          <!-- <van-field
            v-model="sms"
            center
            clearable
            placeholder="请输入11位手机号"
          > -->

          <van-field
            v-model="tel"
            required
            label="手机号"
            placeholder="请输入手机号"
            class="phone"
            @blur="yanzhengPhone"
          />
          <!-- <template #button>
              <van-button size="small" type="primary" color="#ff5654"
                >验证码</van-button
              > -->
          <!-- </template> -->
          <!-- </van-field> -->
          <!-- <van-field
            v-model="number"
            type="number"
            placeholder="请输入手机验证码"
          /> -->
          <van-field
            v-model="password"
            type="password"
            placeholder="请输入6-8位密码"
            border-width-base="1px"
            border-color="#fff"
            required
            @blur="yanzhengPassword"
          />
        </van-cell-group>
      </div>
      <h1>点击“注册”代表您已阅读并同意用户使用协议</h1>
      <button class="btn2" @click="zhuce" @touch='zhuce'>注册</button>
    </div>
  </div>
</template>

<script>
import title1 from "../../../../components/tit.vue";
import { Notify } from "vant";
import {getZhuce} from '../../../../api/index'
export default {
  setup() {
    const number = ref("");
    const password = ref("");

    return { number, password };
  },
  data() {
    return {
      number: "",
      password: "",
      sms: "",
      tel: "",
    };
  },
  components: {
    title1,

    [Notify.Component.name]: Notify.Component,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "login" });
    },

    // 验证手机号
    yanzhengPhone() {
      if (
        !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
          this.tel
        )
      ) {
        Notify({ type: "warning", message: "手机号格式错误" });
        console.log(111);
      }
    },
    yanzhengPassword() {
      if (!/\w{3,8}/.test(this.password)) {
        Notify({ type: "warning", message: "密码必须是3到8位的字母或数字" });
      }
    },
   async zhuce() {
     console.log(222);
      if (
        !/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test( this.tel) &&/\w{3,8}/.test(this.password)
      ) {
        Notify({ type: "warning", message: "格式不正确" });
        return;
      }
      // 1.前台验证通过，发送请求
      console.log(111);
      let paramObj={name:this.tel,password:this.password}
      // console.log(paramObj);
      let  {data:{meta:{status,msg}}}=await getZhuce(paramObj);
      // console.log(res);
      // 2.请求未成功，弹框请求失败
      // console.log(res);
      // let = res
      if(status!=200) return  Notify({ type: "warning", message: msg });
      // 3.注册成功，弹框，并跳转到登录页面
       Notify({ type: 'success', message: '注册成功' });
       this.$router.replace({name:'login'})
    },
  },
};
</script>

<style scoped lang="less">
.zhuce {
  width: 100%;
  height: 100%;

  .enroll {
    width: 700px;
    margin: 30px 25px;
    box-shadow: 0px 0px 5px 1px #ccc;
    // border-radius: 5px;
    color: #000000;
    opacity: 90%;
  }
  h1 {
    font-size: 15px;
    color: #000000;
    opacity: 50%;
    margin: 30px 60px;
  }
  .btn2 {
    border: 3px solid #ff5654;
    width: 700px;
    text-align: center;
    height: 90px;
    border-radius: 5px;
    margin: 0px 0 0 25px;
    background-color: #ff5654;
    color: #fff;
    font-size: 28px;
    font-size: 30px;
  }
}
</style>